<template>
	<qs-page>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<!--isFullScreen 可以实其全屏显示-->
		<ourLoading isFullScreen :active="loadstatus" text="loading..." color="#ffcc00" textColor="#ffcc00"/>
		<!-- #ifdef APP-PLUS -->
		<yomol-upgrade  :type="upgradeType" :url="upgradeUrl" title="发现新版本" :content="upgradeContent" ref="yomolUpgrade"></yomol-upgrade>
		<!-- #endif -->
		<qs-navbar :isBack="false" backUrl="">
			<view class="u-flex u-m-l-8">
				<image src="../../static/image/icon_search.png" mode="" style="width: 130rpx; height: 100rpx;"></image>
			</view>
			<view class="u-flex u-m-r-50"><h3>首页</h3></view>
			<view class="u-flex u-m-r-22">
				<view  @click="$tools.routerTo('/pages/chat/home')">
					<image class="svg-icon-tabbar" src="../../static/image/icon_msg.png" mode=""></image>
					<u-badge size="mini" type="error" :count="msgnum" :offset="offset"></u-badge>
				</view>
				<!-- <u-icon name="xiaoxi" size="38"  custom-prefix="customicon" :custom-style="{'padding': '16rpx'}" ></u-icon> -->
				<!-- <u-icon name="scan" size="38" :custom-style="{'padding': '16rpx'}"></u-icon> -->
			</view>
		</qs-navbar>
		<!-- #ifdef MP-WEIXIN -->
		<!-- <button type="primary" @click="onAppletsLogin">小程序登录</button> -->
		<!-- #endif -->
			
<!-- 		<view class="input_form_box">
			<view class="input_box btm_line">
				<view class="name">支付（统一分配方法）</view>
				<view class="select_info" @click="onPay">
					<view class="select">点击支付</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name">APP微信支付</view>
				<view class="select_info" @click="onAppWxPay('wxpay')">
					<view class="select">点击支付</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name">APP支付宝支付</view>
				<view class="select_info" @click="onAppWxPay('alipay')">
					<view class="select">点击支付</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name">微信小程序支付</view>
				<view class="select_info" @click="onAppWxPay('smallPay')">
					<view class="select">点击支付</view>
				</view>
			</view>
			<view class="input_box btm_line">
				<view class="name">微信公众号支付</view>
				<view class="select_info" @click="onWxPublicPay">
					<view class="select">点击支付</view>
				</view>
			</view>
		</view> -->

		<view class="carousel">
			<u-swiper :list="initdata.Slide" :border-radius="0"></u-swiper>
		</view>

        <view class="card-main u-m-t-30 u-m-b-30">
			<u-row gutter="16" justify="center">
				<u-col span="3">
					<view @click="$tools.routerTo('/pages/shop/index')" style="text-align: center;" class="indexbg index1">
							<!-- <svg class="svg-icon"><use xlink:href="#iconCC"></use></svg> -->
							<image src="/static/index1.png" ></image>
					</view>
					<view style="text-align: center;"><h3>乐购</h3></view>
				</u-col>
				<u-col span="3">
					<view  @click="$tools.routerTo('/pages/exchange/hangqing')" style="text-align: center;" class="indexbg index2">
							<image mode="scaleToFill" src="/static/index2.png" ></image>
					</view>
					<view style="text-align: center;"><h3>行情</h3></view>
				</u-col>
				<u-col span="3">
					<view  @click="$tools.routerTo('/pages/exchange/index')" style="text-align: center;" class="indexbg index3">
							<image mode="scaleToFill" src="/static/index3.png" ></image>
					</view>
					<view  style="text-align: center;"><h3>交易</h3></view>
				</u-col>
				<u-col span="3">
					<view  @click="$tools.routerTo('/pages/robot/index')" style="text-align: center;" class="indexbg index4">
							<image mode="scaleToFill" src="/static/index4.png" ></image>
					</view>
					<view style="text-align: center;"><h3>量化</h3></view>
				</u-col>
			</u-row>
			</view>


	<view  class="base-panel-box u-margin-20">
					<view class="htitle">
						<i><u-icon name="gerenzhongxin-shiyongbangzhu" custom-prefix="customicon" size="30"></u-icon></i>
						搜链资讯
						<view class="right u-font-xs"></view>
					</view>
				<view class="item" v-if="newslist.length<=0">
					 加载中...
				</view>
				<view class="item" v-for="(item, index) in newslist" :key="index" @click="$tools.routerTo('/pages/info/view_soochain','aid='+item.aid+'&title='+item.title)">

				<u-row gutter="0" justify="space-between" >
					<u-col span="2">
						<image mode="scaleToFill" :src="item.litpic" style="width: 96rpx;height:96rpx;"></image>
					</u-col>
					<u-col span="10" text-align="left">
						<view class="demo-layout bg-purple-light">{{item.title}}</view>
					</u-col>
				</u-row>

				</view>

	</view>

	</qs-page>
</template>

<script>
	// #ifdef MP-WEIXIN
	import { onLogin } from '@/plugins/applogin';
	// #endif
	
import { setPay, setPayAssign } from '@/plugins/wxutils';
// #ifdef H5
import { wxPublicPay } from '@/plugins/html5Utils';
// #endif
// #ifdef APP-PLUS
	import yomolUpgrade from '@/components/yomol-upgrade/yomol-upgrade.vue'
// #endif
	import socket from '@/plugins/socket';
	import {mapState,mapMutations} from 'vuex';
	export default {
		components: {
			// #ifdef APP-PLUS
			yomolUpgrade
			// #endif
		},
		data() {
			return {
				loadstatus:false,
				initdata:{
					Slide:[
						"/static/adzw.png?1"
					]
				},
				upgradeType: 'pkg', //pkg 整包 wgt 升级包
				upgradeContent: '', //更新内容
				upgradeUrl: '', //更新地址
				newslist:[],
				msgnum:'',
				offset:[10,5],//消息数字角标位置
			}
		},
	created() {
		let _this=this;
		
		socket.acceptMessage = function(res){
			//console.log("页面接收到数据",res);
			if (res.type=="ping"){
				_this.$store.commit('setChatmsgnoread',res.isnoread);
				//_this.msgnum=res.isnoread;
			}
			if (res.type=="binan"){
				uni.setStorageSync('hangqingcache', res.binancelist);
			}

		}
	},
		 onLoad() {
			this.msgnum=this.user.chatmsgnoread;
			// #ifdef APP-PLUS
					this.checkVersionClick();
			// #endif

            this.soochainnews();

			//this.message=this.$tools.unzip('H4sIAAAAAAAAAKtWKi5JLCktVrIy01FKK81zzk9JVbJSqiqPT0xJUdKBMazMagEMFsdxKgAAAA')
			


		},
		computed: {
		  ...mapState(['user']),
		},
        async onShow() {
            //async+await+Promise 让<if判断>在<getWeatherList返回结果后>执行
            //let flag = await this.getWeatherList();
        },
		methods: {


			
			
			
		onAppletsLogin() {
			// 第一个参数强制登录，尝试登录
			// try 为尝试登录，当第一次登录，没有用户登录权限的时候不弹出登录框
			// judge 询问登录，当第一次登录，没有用户登录权限的时候先弹出提示是否要去登录
			onLogin("judge",() => {
				console.log("登录成功");
			});
		},

            soochainnews(page) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: 'http://www.soochain.com/vueapi/article/index/',
						data: {
							tid: 80,
							p: 1,
							limit:10
						},
						success: (res) => {
							console.log(res)
							if (res.statusCode==200){
								this.newslist=res.data.list;
							}
						},
						fail: (error) => {
							resolve(false);
						}
					});
						

				})
            },
		onPay() {
			setPayAssign({
				price: 8 ,// 价格，
				title: "商品订单", // 标题
				orderNo: "6546541654122317" // 订单编号
			},res => {
				// 小程序支付的回调
				if(res.success){
					uni.showToast({
						title:"支付成功",
						icon:"none"
					});
				}else{
					uni.showToast({
						title:"支付失败，" + res.data,
						icon:"none"
					});
				}
			});
		},
		onAppWxPay(type){
			setPay({
				type: type,  // APP微信支付=wxpay，APP支付宝支付=alipay，微信小程序支付=smallPay
				price: 8 ,// 价格，
				title: "商品订单", // 标题
				orderNo: "6546541654122316" // 订单编号
			},res => {
				// 小程序支付的回调
				if(res.success){
					uni.showToast({
						title:"支付成功",
						icon:"none"
					});
				}else{
					uni.showToast({
						title:"支付失败，" + res.data,
						icon:"none"
					});
				}
			})
		},
		// 公众号支付
		onWxPublicPay(){
			// #ifdef APP-PLUS
			wxPublicPay({
				orderNo: "6546541654122315" // 订单编号
			});
			// #endif
			// #ifndef APP-PLUS
			uni.showToast({
				title:"请在微信公众号环境使用",
				icon:"none"
			});
			// #endif
			
		},

			/*
			* 检测版本升级
			*/
			checkVersionClick() {
				// 检测升级
				var that = this;
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					var platform = uni.getSystemInfoSync().platform
					
                    that.version = widgetInfo.version;  //获取当前版本号
                    //that.version = plus.runtime.version; 
					//根据当前平台去后台检测版本号
					//这是我的逻辑，自己自定义
					uni.request({
						url: 'http://robot.ibytecoin.com/vueapi/tools/check_update_ib',
						data: {
							appid: plus.runtime.appid,
							clientVersion: that.version,
							user_agent:platform,
							imei: plus.device.imei
						},
						success: (res) => {
							console.log(res)
							if (res.data.code==200) {
								//我的后台会返回一个安装包地址（pkgUrl），升级包地址（wgtUrl）
								//判空来判断是非是整包升级还是资源包升级
								//content是版本更新内容 \n换行
								//ios用户pkgUrl是苹果市场App地址，android自定义下载地址
								if (res.data.pkgUrl != '' && res.data.wgtUrl == '') {
									this.upgradeType = 'pkg' 
									this.upgradeContent = res.data.content
									this.upgradeUrl = res.data.pkgUrl
									this.$refs.yomolUpgrade.show()
								} else {
									this.upgradeType = 'wgt'
									this.upgradeContent = res.data.content
									this.upgradeUrl = res.data.wgtUrl
									this.$refs.yomolUpgrade.show()
								}
							} 
						},
						fail: (error) => {
							console.log(error);
						}
					});
				});
			},



		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	
	.card-main{
		.indexbg{
			width: 80rpx;height: 80rpx;
			border-radius: 100%;
			margin: auto auto 10rpx auto;
			padding: 20rpx;
			&.index1{
				background: #CDE9F4;
			}
			&.index2{
				background: #FFE8C2;
			}
			&.index3{
				background: #FFE1E7;
			}
			&.index4{
				background: #D7D6DC;
			}
		}
		image{
			width: 40rpx;height: 40rpx;
		}
		h3{font-size: 30rpx;font-weight: bold; font-style: normal;}
	}
	
</style>
